<!--
 * @Description: 地球动画效果
 * @Author: gaoyunpeng
 * @Date: 2022-01-22 21:32:58
 * @LastEditors: gaoyunpeng
-->
<template>
  <div class="map">
    <div class="map1">
      <img src="@/assets/images/bigscreen/lbx.png" />
    </div>
    <div class="map2">
      <img src="@/assets/images/bigscreen/jt1.png" />
    </div>
    <div class="map3"><img src="@/assets/images/bigscreen/map.png" /></div>
    <!-- <div class="map4" id="map_1"></div> -->
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.map {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 500px;
  height: 500px;
  top: 60%;
  transform: translateY(-50%);
  z-index: 9;
}
.map1,
.map2,
.map3 {
  position: absolute;
}
.map1 {
  width: 650px;
  z-index: 2;
  border: 0;
  animation: myfirst2 15s infinite linear;
  img {
    width: 100%;
  }
}
.map2 {
  width: 600px;
  z-index: 3;
  opacity: 0.6;
  animation: myfirst 10s infinite linear;
  img {
    width: 100%;
  }
}

.map3 {
  width: 550px;
  img {
    width: 100%;
  }
}
@keyframes myfirst2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@keyframes myfirst {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}
</style>
